<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <title>北风编程</title>
      <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css',t='1483944306685') }}" media="all">
      <link rel="stylesheet" href="{{ url_for('static',filename='css/story.css',t='1483944306685') }}" media="all">
</head>
<body>
    <div class="layui-header header header-doc" style="display: flex;position: fixed;width: 100%;">
        <div class="layui-nav" style="height:59px;;width: 100%;">
            <div class="layui-col-md2 layui-nav-item-new"><a href="#"  onClick="javascript:window.history.back();return false;"><i class="layui-icon layui-icon-left"></i> 返回</a></div>
            <div class="layui-col-md10">
                <div class="layui-main">
                    <div class="layui-col-md2 layui-nav-item-new">
                        <button class="layui-btn">
                            {{ lesson_info.name }}
                        </button>
                    </div>
                    {% for item in lesson_info.practive_list %}
                        <div class="layui-col-md2 layui-nav-item-new">
                        <button class="layui-btn layui-btn-disabled next_go" data-href="{{  url_for('practice',id=item.Id) }}">
                            {{ item.name }}
                        </button>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="layui-container" style="padding:20px 0 10px 20px;">
        <div class="layui-row layui-col-space30" id="main" style="margin-top: 59px">
            <div class="layui-col-md9">
                <ul class="layui-timeline" id="story_list"></ul>
                <button class="layui-btn footer_enter" id="footer_enter">
                    <i class="layui-icon layui-icon-next"></i>
                </button>
            </div>
            <div class="layui-col-md3" style="position: fixed;top:100px;right:50px">
                <ul class="layui-nav layui-nav-tree" lay-filter="test" lay-shrink id="chapter_list"></ul>
            </div>
        </div>
    </div>
</body>
<script src="{{ url_for('static',filename='js/jquery-1.12.0.min.js') }}"type="text/javascript"></script>
<script src="{{ url_for('static',filename='layui/layui.js',t='1483944306685') }}"charset="utf-8"type="text/javascript"></script>
<script src="{{ url_for('static',filename='js/axios.min.js') }}"></script>
<script>
    layui.config({
    version: '1568076536509' //为了更新 js 缓存，可忽略
});
layui.use(['tree', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'util', 'form'], function () {
    var tree = layui.tree //树
        , laypage = layui.laypage //分页
        , table = layui.table //表格
        , element = layui.element //元素操作
        , slider = layui.slider//滑块
        , util = layui.util
        , form = layui.form;
    var id = 1;

    function next_post() {
        if($('#footer_enter').hasClass("layui-btn-disabled")){
            return false
        }
        else {
            axios.get("{{ url_for('next',lesson_id=lesson_id) }}?sort=" + id).then(function (result) {
                if (result.data.status == 1) {
                    res = result.data.data;
                    var title = '教程';
                    var content = '';
                    if (res.type == 1) {
                        content = res.content
                    } else if (res.type == 2) {
                        title = '图片';
                        content = "<img src='" + res.content + "' width='100%' height='100%'>"
                    } else if (res.type == 3) {
                        title = '练习';
                        content = "<iframe src='/runcode' frameborder=\"0\" scrolling=\"no\" width=\"100%\" height='360px'></iframe>";
                        $('#footer_enter').addClass('layui-btn-disabled');
                        $('#footer_enter').html('练习中...');
                    } else if (res.type == 4) {
                        title = '选择';
                        var content_split = res.content.split("+");
                        content = content_split[0] + '<br><form  class="layui-form">';
                        $.each(content_split[1].split("|"), function (index, item) {
                            content += '<div class="layui-form-item"><div class="layui-input-inline"><input type="radio" name="sex" value="' + item + '" title="' + item + '"></p> </div></div>'
                        });
                        content += '</form>';
                    }
                    var html = "<li class=\"layui-timeline-item\"><i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i><div class=\"layui-timeline-content layui-text\"><h3 class=\"layui-timeline-title\">" + title + "</h3><p>" + content + "</p></div></li>";
                    id = id + 1;
                    $('#story_list').append(html);
                    form.render();
                    $('img').load(function () {
                        $(document).scrollTop($(document).height());
                    });
                    $(document).scrollTop($(document).height());
                     $('#main dd').removeClass('layui-this');
                     $('#main dd').each(function (index,item) {
                         if($(this).data('id')==res.chapter_id){
                             console.log($(this).data('id'));
                             console.log(res.chapter_id);
                             console.log($(this))
                             $(this).addClass('layui-this')
                         }
                     })
                }
                 else{
                    $('.layui-nav-item-new button').removeClass('layui-btn-disabled')
                 }

            });
        }
    }
    //执行
    $('.footer_enter').click(function () {
        next_post();
    });
    function get_chapter_list() {
        axios.get("{{ url_for('get_chapter_list',lesson_id=lesson_id) }}").then(function (result) {
            if (result.data.status == 1) {
                res = result.data.data;
                var html = '';
                $.each(res, function (index, item) {
                    html += ' <li class="layui-nav-item layui-nav-itemed"><a href="javascript:;" data-id="' + item.Id + '">' + item.name + '</a>';
                    if (item.children) {
                        html += '<dl class="layui-nav-child">';
                        $.each(item.children, function (i, v) {
                            html += '<dd data-id="' + v.Id + '"><a href="javascript:;">' + v.name + '</a></dd>';
                        });
                        html += '</dl>';
                    }
                    html += '</li>'
                });
                $('#chapter_list').append(html);
                element.render();
                next_post();
            }
        });
    }
    $(document).keyup(function() {
        if (event.keyCode == 13) {
            next_post();
        }
    });
    $('.next_go').click(function () {
         if($(this).hasClass("layui-btn-disabled")){
            return false
        }
        else {
            window.location.href=$(this).data('href');
        }
    });
    get_chapter_list();
});
</script>
</html>